<template>
  <div class="teamreport page">
    <van-nav-bar
        :title="username + '-团队报表'"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="main">
      <div class="searchBox">
        <div class="searchDate">
          <div class="left">
            <div class="startTime" @click="showStartTime = true">{{ startTime }}</div>
            <span>~</span>
            <div class="endTime" @click="showEndTime = true">{{ endTime }}</div>
          </div>
          <van-popover v-model="showPopover" ref="popover" placement="bottom" theme="light" overlay
                       @open="onClick">
            <template #reference>
              <div class="datetimerangeBtn" @click="onClick">
                <span style="font-size: .37333rem;">{{ getNowMenu() }}</span>
                <i class="van-badge__wrapper van-icon van-icon-arrow-down"></i>
              </div>
            </template>
            <template #default>
              <div class="datetimerangeList">
                <div class="datetimerangeItem">
                  <div class="datetimerangeItemBtn" :class="nowMenu === 1 ? 'datetimerangeItemActiveBtn' : ''" @click="() =>{
                  nowMenu = 1;
                  startDate = new Date();
                  endDate = new Date();
                  endDate.setDate(endDate.getDate() + 1);
                  showPopover = false;
                  initData();
                }">今天
                  </div>
                </div>
                <div class="datetimerangeItem">
                  <div class="datetimerangeItemBtn" :class="nowMenu === 2 ? 'datetimerangeItemActiveBtn' : ''" @click="() =>{
                  nowMenu = 2;
                  endDate = new Date();
                  let dayOfWeek  = endDate.getDay();
                  endDate.setDate(endDate.getDate() + 1);
                  startDate = new Date();
                  startDate.setDate(endDate.getDate() - dayOfWeek);
                  showPopover = false;
                  initData();
                }">本周
                  </div>
                </div>
                <div class="datetimerangeItem">
                  <div class="datetimerangeItemBtn" :class="nowMenu === 3 ? 'datetimerangeItemActiveBtn' : ''"
                       @click="() =>{
                  nowMenu = 3;
                  endDate = new Date();
                  let year  = endDate.getFullYear(), month = endDate.getMonth();
                  endDate.setDate(endDate.getDate() + 1);
                  startDate = new Date(year, month, 1);
                  showPopover = false;
                  initData();
                }">本月
                  </div>
                </div>
              </div>
            </template>
          </van-popover>
        </div>
      </div>
      <div v-if="report" class="rows">
        <div class="row">
          <div class="cell">
            <div class="number">{{ report.task_money }}</div>
            <div class="label">任务盈利</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.team_money }}</div>
            <div class="label">团队佣金</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.xiaji_nums }}</div>
            <div class="label">下级总数</div>
            <div class="line-bottom"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.dashang_scord }}</div>
            <div class="label">打赏积分</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.paicai_money }}</div>
            <div class="label">派彩金额</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.activity_money }}</div>
            <div class="label">活动礼金</div>
            <div class="line-bottom"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.touzhu_nums }}</div>
            <div class="label">打赏人数</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.shouchong_nums }}</div>
            <div class="label">首充人数</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.zhuce_nums }}</div>
            <div class="label">注册人数</div>
            <div class="line-bottom"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.sf_win }}</div>
            <div class="label">三方盈利</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.sf_money }}</div>
            <div class="label">三方打赏</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.df_number }}</div>
            <div class="label">三方人数</div>
            <div class="line-bottom"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.rukuan_money }}</div>
            <div class="label">充值金额</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
          <div class="cell">
            <div class="number">{{ report.chukuan_money }}</div>
            <div class="label">兑换积分</div>
            <div class="line-bottom"></div>
            <div class="line-right"></div>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="showStartTime" :overlay="true" :close-on-click-overlay="false" position="bottom"
               style="height: 30%;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="startDate"
          type="date"
          @cancel="showStartTime = false"
          @confirm="()=>{
            nowMenu = 0;
            initData();
          }"
      />
    </van-popup>
    <van-popup v-model="showEndTime" :overlay="true" :close-on-click-overlay="false" position="bottom"
               style="height: 30%;">
      <van-datetime-picker
          class="datetimepicker"
          v-model="endDate"
          type="date"
          @cancel="showEndTime = false"
          @confirm="()=>{
            nowMenu = 0;
            initData();
          }"
      />
    </van-popup>
  </div>
</template>
<script>
import {getReport} from "@api/Agent";
import {mapGetters} from "vuex";

export default {
  name: "AgentReport",
  computed: mapGetters(["userInfo"]),
  data: function () {
    return {
      nowMenu: 0,
      showPopover: false,
      username: undefined,
      startTime: '',
      endTime: '',
      showStartTime: false,
      showEndTime: false,
      startDate: undefined,
      endDate: undefined,
      report: undefined,
    }
  },
  created() {
    this.username = this.$route.query.username;
    if (!this.username) {
      this.username = this.userInfo.username;
    }
    this.startDate = new Date();
    this.startDate.setMonth(this.startDate.getMonth() - 1);

    this.endDate = new Date();
    this.endDate.setDate(this.endDate.getDate() + 1);

    this.initData();
  },
  methods: {
    initData: function () {
      this.showStartTime = false;
      this.showEndTime = false;
      this.startTime = this.startDate.format("yyyy-MM-dd");
      this.endTime = this.endDate.format("yyyy-MM-dd");
      getReport(this.username, this.startTime, this.endTime).then(v => {
        this.report = v.data;
      })
    },
    onClick: function () {
      this.showPopover = true;
    },
    getNowMenu: function () {
      switch (this.nowMenu) {
        case 1:
          return '今天';
        case 2:
          return '本周';
        case 3:
          return '本月';
        default:
          return '';
      }
    }
  }
};
</script>
<style>
.van-popover--light {
  color: #fa59b5
}
</style>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-picker {
  background-color: #f5dcf1;
}

.pageloading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 2.66667rem;
  height: 2.66667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

.van-picker__mask {
  background: transparent !important
}

.van-picker__toolbar {
  background-color: #f2f2f5
}

.van-picker-column__item--selected {
  width: 94%;
  margin: auto;
  border-radius: .16rem;
  background-color: #f2f2f5
}

.datetimerangeList {
  width: 1.6rem;
  color: #000
}

.datetimerangeList .datetimerangeItem {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: .10667rem;
  padding-bottom: .10667rem;
  margin-top: .02667rem;
  background-color: #f2f2f5
}

.datetimerangeList .datetimerangeItem .datetimerangeItemBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .32rem;
  padding: .16rem .32rem;
  border-radius: .16rem;
  color: #000
}

.datetimerangeList .datetimerangeItem .datetimerangeItemActiveBtn {
  color: #fcf0fa;
  background-color: #e38afb
}

.van-search__content {
  border-radius: 1.06667rem
}

.van-badge__wrapper, .van-icon {
  font-size: .66667rem
}

.teamreport {
  height: 100%
}

.teamreport .van-nav-bar {
  background: linear-gradient(90deg, #fff, #fff)
}

.teamreport .main {
  display: flex;
  flex-direction: column;
  height: calc(100% - 1.2rem);
  background: #f4ebf3
}

.teamreport .main .van-icon-search {
  color: #979799
}

.teamreport .main .searchBox {
  padding: .26667rem;
  background: #f4ebf3
}

.teamreport .main .searchBox .searchDate {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

.teamreport .main .searchBox .searchDate .left {
  display: flex;
  flex-direction: row;
  align-items: center
}

.teamreport .main .searchBox .searchDate .left .endTime, .teamreport .main .searchBox .searchDate .left .startTime {
  border: 0;
  border-radius: 1.06667rem;
  padding: .26667rem .66667rem;
  color: #979799;
  background-color: #f5dcf1
}

.teamreport .main .searchBox .searchDate .left span {
  margin: 0 .13333rem
}

.teamreport .main .searchBox .searchDate .van-icon {
  margin-left: .23333rem;
  color: #999;
  font-size: .37333rem
}

.teamreport .main .rows {
  height: calc(100% - 1.2rem);
  overflow: auto;
  padding: 0 .4rem;
  background-color: #f5dcf1
}

.teamreport .main .rows .row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start
}

.teamreport .main .rows .row .cell {
  height: 2.66667rem;
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative
}

.teamreport .main .rows .row .cell .line-bottom {
  bottom: 0;
  position: absolute;
  border-bottom: .02667rem solid #f2f2f5;
  width: .53333rem
}

.teamreport .main .rows .row .cell .line-right {
  right: 0;
  position: absolute;
  border-right: .02667rem solid #f2f2f5;
  height: .53333rem
}

.teamreport .main .rows .row .cell .label, .teamreport .main .rows .row .cell .number {
  padding: .13333rem 0
}

.teamreport .main .rows .row .cell .number {
  color: #fa59b5;
  font-size: .42667rem
}

.teamreport .main .rows .row .cell .label {
  color: #000
}

</style>
